<div ng-controller="StepDialog" ng-hide="isCapturing">
	<div class="panel bar fix hasMenu" style="min-height:0;" ng-style="{top: pos.top + 'px', left: pos.left + 'px'}">
		<div class="title" ng-draggable top="pos.top" left="pos.left" ng-mousedown="mask()" ng-mouseup="deMask()">步骤
			<ul class="toolbar right">
				<li>
					<a href="#/panel" title="关闭" class="button bar-close ico close"></a>
				</li>
			</ul>
		</div>
		<form ng-submit="appendStepTo()">
			<div class="grid-container">

				<div class="grid">
					<div class="col col-9-12">
						<label>步骤名称
							<input ng-model="options.name" />
						</label>
					</div>
					<div class="col col-3-12">
						<label>创建日期
							<input ng-model="updatetime"  ng-model-options="{ getterSetter: true}" readonly />
						</label>
					</div>
				</div>

				<div class="grid align-bottom">
					<div class="col col-10-12">
						<div class="grid-container">
							<div class="grid">
								<div class="col col-3-12">
									<label>步骤类型
										<select ng-model="type" ng-model-options="{ getterSetter: true, updateOn: 'change' }">
											<option value="DelayStep">延迟步骤</option>
											<option value="EventStep">事件步骤</option>
										</select>
									</label>
								</div>
								<div class="col col-9-12">

									<label ng-if="options.type==='EventStep'">条件（断言）
										<input ng-model="options.condition" />
									</label>

									<label ng-if="options.type==='DelayStep'">延迟
										<input ng-model="delay" ng-model-options="{ getterSetter: true, updateOn: 'blur' }"/>
										<span class="caption">毫秒</span>
									</label>
								</div>
							</div>

							<div class="grid grid-flexible align-bottom">
								<div class="col">
									<label>操作对象
										<input ng-model="options.object" /><span class="caption" id="path-result">{{selectorLength()}}</span>
										<!--						<input disabled />-->
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="col col-2-12">
						<a class="button call-out search" ng-click="catchHTML()"></a>
					</div>
				</div>

				<div class="grid">
					<div class="col col-3-12">
						<label>执行动作
							<select ng-model="action" ng-model-options="{ getterSetter: true, updateOn: 'change' }">

								<optgroup label="鼠标操作">
									<option value="click">单击</option>
									<!--<option value="dblclick" {{if form && form.action=="dblclick" }}selected{{/if}}>{{:lang.dblclick}}</option>-->
									<!--<option value="mousedown" {{if form && form.action=="mousedown" }}selected{{/if}}>{{:lang.mousedown}}</option>-->
									<!--<option value="mouseup" {{if form && form.action=="mouseup" }}selected{{/if}}>{{:lang.mouseup}}</option>-->
									<!--<option value="mousemove" {{if form && form.action=="mousemove" }}selected{{/if}}>{{:lang.mousemove}}</option>-->
									<!--<option value="mouseenter" {{if form && form.action=="mouseenter" }}selected{{/if}}>{{:lang.mouseenter}}</option>-->
									<!--<option value="mouseleave" {{if form && form.action=="mouseleave" }}selected{{/if}}>{{:lang.mouseleave}}</option>-->
									<!--<option value="mouseout" {{if form && form.action=="mouseout" }}selected{{/if}}>{{:lang.mouseout}}</option>-->
									<!--<option value="mouseover" {{if form && form.action=="mouseover" }}selected{{/if}}>{{:lang.mouseover}}</option>-->
								</optgroup>

								<optgroup label="表单控件操作">
									<option value="val">赋值</option>
									<option value="blur">焦点丢失</option>
									<option value="focus">聚焦</option>
									<option value="change">改变</option>
									<!--<option value="select" {{if form && form.action=="select" }}selected{{/if}}>{{:lang.select}}</option>-->
								</optgroup>

								<optgroup label="键盘操作">
									<option value="keydown" >按键按下</option>
									<option value="keyup">按键抬起</option>
									<option value="keypress">击键</option>
								</optgroup>

								<optgroup label="页面操作">
									<option value="resize">改变尺寸</option>
									<option value="scroll">滚动</option>
								</optgroup>

							</select>
						</label>
					</div>
					<!-- ACTION：赋值操作样式 -->
					<div class="col col-2-12" ng-if="options.action==='val'">
						<label>数据来源
							<select ng-model="options.param.type">
								<option value="direct">直接量</option>
								<option value="index" ng-if="hasDictionary()">字典</option>
							</select>
						</label>
					</div>

					<div class="col col-7-12" ng-if="options.action==='val'&&options.param.type==='index'">
						<label>字典字段
							<select ng-model="options.param.value">
								<option ng-repeat="field in fields"
								value="{{field.name}}"
								ng-selected="field.name === $parent.options.param.value">{{field.name}}</option>
							</select>
						</label>
					</div>
					<div class="col col-7-12" ng-if="options.action==='val'&&options.param.type!=='index'">
						<label>值
							<input ng-model="options.param.value" />
						</label>
					</div>

					<!-- ACTION：滚动 样式 -->
					<div class="col" ng-if="options.action==='scroll'">
						<label>垂直滚动
							<input ng-model="options.param.top" />
						</label>
					</div>
					<div class="col" ng-if="options.action==='scroll'">
						<label>水平滚动
							<input ng-model="options.param.left" />
						</label>
					</div>

					<!-- ACTION：无参数类 样式 -->
					<div class="col col-9-12" ng-if="!hasParam()">
						<label>动作参数
							<input disabled />
						</label>
					</div>
				</div>

				<div class="grid">
					<label>步骤注释
						<textarea ng-model="options.comment"></textarea>
					</label>
				</div>
			</div>

			<div class="row">
				<ul class="toolbar right">
					<li>
						<input class="button success large" type="submit" value="修改" ng-if="!isCreate()" />
					</li>
					<li>
						<input class="button primary large" type="submit" value="追加" ng-if="isCreate()" />
					</li>
					<li>
					<a class="button warning large bar-close" href="#/panel" title="取消">取消</a>
					</li>
				</ul>
			</div>
		</form>
	</div>
</div>
